<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;box-sizing: border-box;list-style: none;}
        #tabs{  width: 100%;  display: flex;  }
        #tabs li{ user-select: none; width: 25%;  text-align: center;  height: 40px;  line-height: 40px;  background: rgba(251, 73, 198, 0.9);  color:#fff;  font-size: 1.8em;  border-right: 2px dotted #fff;  }
        #tabs li:last-child{  border-right: 0;  }
        #tabs li:hover{  cursor: pointer;  background: rgba(251, 73, 198, 0.9);  }
        #tabs li.active{  background: rgba(158, 148, 240, 0.9);  color:rgba(255,255,255,1);  }
        #list div{  width: 100%;  height: 400px;  padding: 20px;  background: #f4f4f4;  display: none;  }
        #list div:nth-child(1){  display: block;  }
    </style>
</head>
<body>
<ul id='tabs'>
    <li class='active'>第一周</li>
    <li>第二周</li>
    <li>第三周</li>
    <li>第四周</li>
</ul>
<div id='list'>
    <div>座布局，这周就干布局，干到么利气为止...</div>
    <div>复习了rem布局；数据类型及转换方式、return用法、回调函数、事件委托 、事件绑定、git使用方法、自我介绍/技能介绍/IT民工形象初识/函数的封装以及调用</div>
    <div>待定...</div>
    <div>未知...</div>
</div>
</body>
</html>
<script type="text/javascript">
    function Toggle(obj){
        var oUl = document.getElementById(obj.tab);
        var oDiv = document.getElementById(obj.list);
        this.oLi = oUl.getElementsByTagName('li');
        this.oDiv = oDiv.getElementsByTagName('div');
        var _this = this;
        var i=0;
        for(var i=0;i<this.oLi.length;i++){
            this.oLi[i].index = i;
            this.oLi[i].onclick = function(){
                _this.show(this.index);
            }
        }
    }
    Toggle.prototype.show = function(Index){
        for(var i=0;i<this.oLi.length;i++){
            this.oLi[i].removeAttribute('class','active');
            this.oDiv[i].style.display = 'none';
        }
        this.oLi[Index].setAttribute('class','active');
        this.oDiv[Index].style.display = 'block';
    }

    var toggle = new Toggle({tab:"tabs", list:"list"})
</script>